<template>
	<el-dialog top="5vh" title="物流信息" width="30%" :close-on-click-modal="false" :visible.sync="visible" :before-close="close">
		<div v-loading="loading">
			<el-steps direction="vertical" finish-status="success" :active="info.traces.length" v-if="info.traces.length">
				<el-step v-for="(item, i) in tracesList" :key="i" :title="item.acceptTime" :description="item.acceptStation"></el-step>
			</el-steps>
			<div class="no-data" v-if="info.traces.length == 0">
				{{ info.reason }}
			</div>
		</div>
	</el-dialog>
</template>

<script>
import orderService from '@/api/orderService.js'
export default {
	props: {},
	data () {
		return {
			visible: true,
			info: {
				traces: [],
				reason: '暂无信息'
			},
			tracesList: [],
			loading: false
		}
	},
	methods: {
		init (obj) {
			this.searchDetail(obj.order_id, obj.id)
		},
		searchDetail (order_id, id) {
			this.loading = true
			orderService.goodStreamDetail(order_id, id).then(res => {
				if (res.data && res.data.code == 200) {
					if (res.data.data) {
						this.info = res.data.data
						if (res.data.data.traces.length > 0) {
							this.tracesList = res.data.data.traces.reverse()
						}
					}
				} else {
					this.$message.error(res.data.msg)
				}
				this.loading = false
			}).then(res => {
				this.loading = false
			})
		},
		close (e) {
			this.$emit('result')
		}
	}
}
</script>

<style scoped>
.w-100 {
	width: 100%;
}
</style>
